<template>
  <view class="content">
    <wd-form ref="form" :model="model">
      <wd-cell-group border>
        <wd-input
          label="税前薪资"
          label-width="100px"
          prop="salary"
          clearable
          v-model="model.salary"
          placeholder="请输入税前薪资"
          :rules="[{ required: true, message: '请输入税前薪资' }]"
        />
        <wd-input
          label="社保基数"
          label-width="100px"
          prop="insurance"
          clearable
          v-model="model.insurance"
          placeholder="请输入社保基数"
          :rules="[{ required: true, message: '请输入社保基数' }]"
        />
        <wd-input
          label="公积金基数"
          label-width="100px"
          prop="hpf"
          clearable
          v-model="model.hpf"
          placeholder="请输入公积金基数"
          :rules="[{ required: true, message: '请输入公积金基数' }]"
        />
        <wd-picker
          label="公积金比例"
          label-width="100px"
          prop="hpfRatio"
          v-model="model.hpfRatio"
          :columns="ratioList"
          placeholder="请选择公积金比例"
          :rules="[{ required: true, message: '请选择公积金比例' }]"
        />
        <wd-input
          label="专项附加扣除"
          label-width="100px"
          prop="specialDeduction"
          clearable
          v-model="model.specialDeduction"
          placeholder="请输入专项附加扣除金额"
          :rules="[{ required: true, message: '请输入专项附加扣除金额' }]"
        />
      </wd-cell-group>
      <view class="footer">
        <wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
      </view>
    </wd-form>
    <wd-action-sheet v-model="show" title="计算结果" @close="handleClose">
      <wd-cell-group>
        <wd-cell title="税前收入" :value="model.salary" />
        <wd-cell title="应纳税所得额" :value="taxs.taxableIncome" />
        <wd-cell title="社保扣除" :value="taxs.insurancePay" />
        <wd-cell title="公积金扣除" :value="taxs.hpfPay" />
        <wd-cell title="适用税率" :value="`${taxs.rate}%`" />
        <wd-cell title="应纳税额" :value="taxs.tax" />
        <wd-cell title="税后收入" :value="taxs.afterTaxSalary" />
      </wd-cell-group>
    </wd-action-sheet>
  </view>
</template>
<script setup>
  const show = ref(false);
  const form = ref();
  const ratioList = [
    {
      label: '5%',
      value: '5',
    },
    {
      label: '6%',
      value: '6',
    },
    {
      label: '7%',
      value: '7',
    },
    {
      label: '8%',
      value: '8',
    },
    {
      label: '9%',
      value: '9',
    },
    {
      label: '10%',
      value: '10',
    },
    {
      label: '11%',
      value: '11',
    },
    {
      label: '12%',
      value: '12',
    },
  ];
  const model = reactive({
    salary: '',
    insurance: '',
    hpf: '',
    hpfRatio: '12',
    specialDeduction: '0',
  });
  const taxs = reactive({
    tax: 0,
    afterTaxSalary: 0,
    rate: 0,
    insurancePay: 0,
    hpfPay: 0,
    taxableIncome: 0,
  });
  const handleSubmit = () => {
    form.value
      .validate()
      .then(({ valid }) => {
        if (valid) {
          const { tax, afterTaxSalary, taxableIncome, rate, hpfPay, insurancePay } = calcTax();
          taxs.tax = tax.toFixed(2);
          taxs.afterTaxSalary = afterTaxSalary.toFixed(2);
          taxs.taxableIncome = taxableIncome.toFixed(2);
          taxs.hpfPay = hpfPay.toFixed(2);
          taxs.insurancePay = insurancePay.toFixed(2);
          taxs.rate = rate.toFixed(2) * 100;
          show.value = true;
        }
      })
      .catch((error) => {
        console.log(error, 'error');
      });
  };
  const calcTax = () => {
    const threshold = 5000; // 起征点

    // 公积金：基数 * 比例 / 100
    const hpfPay = (model.hpf * model.hpfRatio) / 100;
    // 社保：基数 * 10.3 / 100
    const insurancePay = (model.insurance * 10.3) / 100;
    const taxableIncome = model.salary - hpfPay - insurancePay - model.specialDeduction - threshold;
    const taxTable = [
      { max: 36000, rate: 0.03, quick: 0 },
      { max: 144000, rate: 0.1, quick: 2520 },
      { max: 300000, rate: 0.2, quick: 16920 },
      { max: 420000, rate: 0.25, quick: 31920 },
      { max: 660000, rate: 0.3, quick: 52920 },
      { max: 960000, rate: 0.35, quick: 85920 },
    ];
    const { rate, quick } = taxTable.find((bracket) => taxableIncome <= bracket.max);
    if (taxableIncome <= 0) {
      // 税后收入：税前收入 - 社保 - 公积金
      return { tax: 0, afterTaxSalary: model.salary - insurancePay - hpfPay, taxableIncome: 0, rate: 0, hpfPay, insurancePay };
    }

    const tax = taxableIncome * rate - quick;
    // 税后收入：税前收入 - 社保 - 税 - 公积金
    const afterTaxSalary = model.salary - insurancePay - tax - hpfPay;

    return { tax, afterTaxSalary, taxableIncome, rate, hpfPay, insurancePay };
  };
  function handleClose() {
    show.value = false;
  }
</script>
<style scoped lang="scss">
  .content {
    width: 100%;
    padding: 10rpx 0;
    .footer {
      padding: 50rpx;
    }
  }
</style>
